<template>
	<view class="con-box">
		<view class="">
			<view class="">
				个人信息
			</view>
			<view class="all-box dir-left-wrap cross-center main-between">
				<view class="cla-item" @click="jump('/plugins/solitaire/goods/list')">
					商品库
				</view>
				<view class="cla-item" @click="jump('/plugins/solitaire/goods/cate')">
					商品分类管理
				</view>
				<view class="cla-item" @click="jump('/plugins/solitaire/order/list')">
					订单管理
				</view>
				<view class="cla-item" @click="jump('/plugins/solitaire/clerk/list')">
					核销管理
				</view>
				<view class="cla-item" @click="jump('/plugins/solitaire/census/census')">
					统计信息
				</view>
				<view class="cla-item" @click="jump('/plugins/solitaire/goods/list')">
					数据分析
				</view>
				<view class="cla-item" @click="jump('/plugins/solitaire/goods/list')">
					提货点
				</view>
			</view>
		</view>
		<view class="rea-btn launch-so" @click="jump('/plugins/solitaire/lasolitaire/lasolitaire')">
			发起接龙
		</view>
		<view class="">
			<!-- <view class="reatime">
				<view class="text-orange"></view>
				<view class="action">
					2020.02.27
				</view>
			</view> -->
			<view class="rea-solitaire" v-for="(list, index) in lists" :key="index">
				<view class="rea-soitem">
					<view class="publisher">
						<image class="avatar" src="/static/image/icon/order/icon-comment.png" mode=""></image>
						<view class="content">
							<view>{{ list.openid.nickName }}</view>
							<view class="create-time">{{ list.create_time }}</view>
						</view>
					</view>
					<view class="rea-content">
						{{ list.content }}
						<image class="b-image" v-if="list.pic" :src="list.pic" mode="aspectFill"></image>
					</view>

					<view v-if="list.comts.length" class="solitaireor">
						<view class="so-item" v-for="(order, ord_in) in list.comts" :key="ord_in">
							<image class="so-avatar" src="/static/image/icon/order/icon-comment.png" mode=""></image>
							<view class="so-content">
								<view class="">{{ order.openid.nickName }}</view>
								<view class="">+1</view>
							</view>
						</view>
					</view>

					<view v-else class="soli-else">
						一大波人正在赶来...
					</view>

					<view class="rea-btn" @click="solit(list.id)">
						我要接龙
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCard: false,
				lists: [{
					id: 24,
					openid: {
						id: 2,
						nickName: '你猜',
						avatarUrl: 'https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/flk810QttsrSjYs2Tia3c9DjdicNNWX1OMoLkiaYjesciaNuGs6E34cCzMrlrxoRViaWAURwWphHicOyGRfIibaEkhL0w\/132',
						realname: null,
						tel: null,
						address: '',
					},
					buy_date: 'NULL ',
					pic: 'http://wechatupload.shuangxitang.cn/uploads/mall1/202110/20211022/a41274e192136ac8f2c4ca5f9036db05.png',
					content: '大家好，互助下单，疫情之下，邻里和睦',
					is_send: 1,
					is_master: 0,
					comts: [
						/* {
							id: 33,
							openid: {
								id: 4,
								nickName: '你猜',
								avatarUrl: 'https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/2lZ9GXssnuO2Bhic4KS0FM03iaah67mkldq864ncskg38mlULmNvON2yVgTOm2oMyHFQNYzrrmeUF7Dvl0OBFv2w\/132',
								realname: null,
								tel: null,
								address: '',
							},
							jl_id: '24',
							address: '2。201',
							name: '你猜',
							tel: '',
							order_status: '0',
							des: '快递在小区门口谢谢'
						},
						{
							id: 32,
							openid: {
								id: 2,
								nickName: '你猜',
								avatarUrl: 'https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/flk810QttsrSjYs2Tia3c9DjdicNNWX1OMoLkiaYjesciaNuGs6E34cCzMrlrxoRViaWAURwWphHicOyGRfIibaEkhL0w\/132',
								realname: null,
								tel: null,
							},
							jl_id: '24',
							address: '1-922',
							name: '你猜',
							tel: '',
							order_status: '0',
							des: ''
						} */
					],
					my_orders: [],
					total_orders: 2,
					create_time: '1998-09-01'
				}]
			}
		},
		methods: {
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			solit(item) {
				uni.navigateTo({
					url: '/plugins/solitaire/detail/detail'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.con-box {
		width: 100%;
		// padding: 0 24rpx;
	}

	.all-box {
		// width: 702rpx;
		// margin: 0 auto;
		width: 100%;
		padding: 0 24rpx;
		background-color: #FFFFFF;
		font-size: 28rpx;
		line-height: 60rpx;

		.cla-item {
			padding: 0 24rpx;
		}
	}

	.rea-btn {
		text-align: center;
		line-height: 80rpx;
		color: #FFFFFF;
		background-color: #09ba07;
		border-radius: 72rpx;
		margin: 24rpx auto;
	}

	.launch-so {
		// padding: 0 24rpx;
		width: 702rpx;
	}

	.reatime {
		margin-top: 30rpx;
		margin-left: 24rpx;
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100rpx;

		.text-orange {
			display: inline-block;
			background: #f37b1d;
			width: 8rpx;
			height: 28rpx;
		}

		.action {
			margin-left: 30rpx;
			font-size: 30rpx;
			margin-right: 30rpx;
		}
	}

	.rea-solitaire {
		padding: 24rpx;

		.rea-soitem {
			border-radius: 16rpx;
			background: #FFFFFF;
			padding: 24rpx;
		}

		.rea-content {
			font-size: 28rpx;

			.b-image {
				width: 100%;
				height: 200rpx;
			}
		}

		.rea-btn {
			text-align: center;
			line-height: 80rpx;
			color: #FFFFFF;
			background-color: #09ba07;
			border-radius: 72rpx;
			margin: 24rpx auto;
		}

		.publisher {
			display: flex;
			padding-right: 10rpx;
			height: 140rpx;
			background-color: #ffffff;
			align-items: center;

			.avatar {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}

			.content {
				width: calc(100% - 96rpx - 60rpx - 20rpx);
				font-size: 26rpx;
			}

			.create-time {
				font-size: 24rpx;
				color: #aaaaaa;
			}
		}
	}

	.solitaireor {
		font-size: 28rpx;

		.so-item {
			display: flex;
			align-items: center;

			.so-avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}

			.so-content {
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				flex: 1;
			}
		}
	}

	.soli-else {
		font-size: 28rpx;
		color: #888888;
		text-align: center;
		line-height: 60rpx;
	}
</style>
